<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>伟大的飞跃</title>
		<link rel="stylesheet" href="{{ STATIC_URL }}open/css/second.css">
		<link rel = 'stylesheet' href="{{ STATIC_URL }}open/font_2669378_1z1i76b0nw9/iconfont.css">
		<link rel="stylesheet" href="{{ STATIC_URL }}open/css/sortable.min.css">
		<script type="text/javascript" src="{{ STATIC_URL }}js/sortable.min.js"></script>
		<!--插入背景音乐-->
		<audio id="myaudio" controls="controls" src="{{ STATIC_URL }}open/music/bkmusic.mp3" autoplay="autoplay" loop="loop" style="height: 0;" >

		</audio>
		<script type="text/javascript">
			function toggleSound(){
				var music=document.getElementById("myaudio");//获取id
				console.log(music);
				console.log(music.paused);
				if(music.paused){   //判断是否播放
					music.paused = false;
					music.play();
				}
			}
			setInterval("toggleSound()",1);
		</script>
	</head>
	<body>
		<!-- 巨屏轮播图 -->
		<div id="app"></div>

		<script src='{{ STATIC_URL }}js/react.min.js'></script>
		<script src='{{ STATIC_URL }}js/react-dom.min.js'></script>
		<script src='{{ STATIC_URL }}js/index.min.js'></script>



		<!-- 瀑布流 -->
		<main class="sortable">
			<div class="container">
				<div class="wrapper">
					<!-- <ul class="sortable__nav nav">
						<li>
							<a data-sjslink="all" class="nav__link">
								所有
							</a>
						</li>
						<li>
							<a data-sjslink="flatty" class="nav__link">
								扁平化
							</a>
						</li>
						<li>
							<a data-sjslink="funny" class="nav__link">
								收起
							</a>
						</li>
					</ul> -->
					<div id="sortable" class="sjs-default">
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/xzgcl.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">新中国成立</h2>
									<p class="card__text">
									1949年10月1日下午2时， 中国人民政治协商会议第一届全体会议选举产生的 中央人民政府委员会在勤政殿举行第一次会议。中央人民政府主席 毛泽东，副主席 朱德、 刘少奇、 宋庆龄、 李济深、 张澜、 高岗，以及 周恩来等56名中央人民政府委员会委员宣布就职。会议一致决议，宣布 中华人民共和国中央人民政府成立，接受《 中国人民政治协商会议共同纲领》为施政方针，向各国政府宣布中华人民共和国中央人民政府为中国唯一合法政府，愿与遵守平等、互利及互相尊重领土主权原则的任何外国政府建立外交关系。会议结束后，中央人民政府主席、副主席及各位委员集体出发，乘车出 中南海东门，前往 天安门城楼出席开国大典。
									下午3时，北京30万群众齐集 天安门广场，举行隆重的开国大典。 毛泽东主席在 天安门城楼上向全世界庄严宣告：“ 中华人民共和国中央人民政府今天成立了！”向世界宣告 中华人民共和国中央人民政府成立。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/ggkf.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">改革开放</h2>
									<p class="card__text">
									改革开放，是1978年12月 十一届三中全会中国开始实行的对内改革、对外开放的政策。中国的对内改革先从农村开始，1978年11月， 安徽省 凤阳县 小岗村实行“分田到户， 自负盈亏”的 家庭联产承包责任制（ 大包干），拉开了中国 对内 改革的大幕。在城市，国营企业的自主经营权得到了明显改善。改革开放是中国共产党在 社会主义初级阶段基本路线的两个基本点之一。中共十一届三中全会以来进行社会主义现代化建设的总方针、总政策，是强国之路，是党和国家发展进步的活力源泉。改革，即对内改革，就是在坚持社会主义制度的前提下，自觉地调整和改革生产关系同生产力、上层建筑同经济基础之间不相适应的方面和环节，促进生产力的发展和各项事业的全面进步，更好地实现广大人民群众的根本利益。开放，即对外开放，是加快我国现代化建设的必然选择，符合当今时代的特征和世界发展的大势，是必须长期坚持的一项基本国策。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/jjtq.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">建设经济特区</h2>
									<p class="card__text">
										1979年4月邓小平首次提出要开办“出口特区”，后于1980年3月，“出口特区”改名为“经济特区”，并在深圳加以实施。按其实质，经济特区也是世界自由港区的主要形式之一。以减免关税等优惠措施为手段，通过创造良好的投资环境，鼓励外商投资，引进先进技术和科学管理方法，以达促进特区所在国经济技术发展的目的。经济特区实行特殊的经济政策，灵活的经济措施和特殊的经济管理体制，并坚持以外向型经济为发展目标。
										中国经济特区诞生于70年代末，80年代初，成长于90年代。经济特区的设置标志中国改革开放进一步发展。中国大陆地区共有7个经济特区。
										1979年7月，中共中央、国务院同意在广东省的深圳、珠海、汕头三市和福建省的厦门市试办出口特区。1980年5月，中共中央和国务院决定将深圳、珠海、汕头和厦门这四个出口特区改称为经济特区。1988年4月，设立海南经济特区。
										1992年中国加快改革开放后经济特区模式移到 国家级新区， 上海浦东等国家级新区新的特区扩大改革等发展起来，成为中国新一轮改革重要标志。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/kfyhcs.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">开放沿海城市</h2>
									<p class="card__text">
										沿海开放城市（coastal open city）是指中国 沿海地区对外开放的、并在对外经济活动中实行 经济特区的某些特殊政策的一系列 港口城市，也是经济特区的延伸，是根据 邓小平的创议而采取的 对外开放 战略决策。
										1984年， 大连、 秦皇岛、 天津、 烟台、 青岛、 连云港、 南通、 上海、 宁波、 温州、 福州、 广州、 湛江、 北海，被 国务院批准为全国第一批对外开放城市。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/shzyxdhjs.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">社会主义现代化建设</h2>
									<p class="card__text">
										沿着中国 特色社会主义道路，集中力量进行社会主义现代化建设，是中华人民共和国宪法规定的国家根本任务。1992年邓小平发表南方谈话后，党和国家根本任务是集中力量进行改革开放和现代化建设，确保小康社会建成。
										2020年10月29日， 中国共产党第十九届中央委员会第五次全体会议通过《 中国共产党第十九届中央委员会第五次全体会议公报》。全会提出，坚持创新在我国现代化建设全局中的核心地位，把科技自立自强作为国家发展的战略支撑，面向世界科技前沿、面向经济主战场、面向国家重大需求、面向人民生命健康，深入实施科教兴国战略、 人才强国战略、创新驱动发展战略，完善国家创新体系，加快建设科技强国。要强化国家战略科技力量，提升企业技术创新能力，激发人才创新活力，完善科技创新体制机制。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/wwytztbj.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">五位一体总体布局</h2>
									<p class="card__text">
										“五位一体”总体布局是指经济建设、政治建设、文化建设、社会建设和生态文明建设五位一体，全面推进。
										五位一体总布局是一个有机整体，其中经济建设是根本，政治建设是保证，文化建设是灵魂，社会建设是条件，生态文明建设是基础。
										只有坚持五位一体建设全面推进、协调发展，才能形成经济富裕、政治民主、文化繁荣、社会公平、生态良好的发展格局，把我国建设成为富强民主文明和谐的社会主义现代化国家。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/sgqmzlbj.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">四个全面战略布局</h2>
									<p class="card__text">
										四个全面战略布局是全面建设社会主义现代化国家、全面深化改革、全面依法治国、全面从严治党。四个全面战略布局的提出，推动改革开放和社会主义现代化建设迈上新台阶提供了强力保障。
										从历史的发展脉络来看，四个全面战略布局是对我们党治国理政实践经验的科学总结和丰富发展。 
										从当代中国的现实来看，四个全面战略布局集中体现了时代和实践发展对党和国家工作的新要求。
										从事业的长远发展来看，四个全面战略布局确立了续写中国特色社会主义新篇章的行动纲领。 
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/qmjsxksh.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">全面建成小康社会</h2>
									<p class="card__text">
										党的十八大报告首次正式提出全面“建成”小康社会。“小康社会”是由 邓小平在20世纪70年代末80年代初在 规划中国经济社会发展蓝图时 提出的战略 构想。
										2017年10月18日，习近平指出，我们既要全面建成小康社会、实现第一个百年奋斗目标，又要乘势而上开启全面建设社会主义现代化国家新征程，向第二个百年奋斗目标进军。
										2019年3月5日，国务院总理 李克强在发布的 2019年国务院政府工作报告中提出，对标全面建成小康社会任务，扎实推进脱贫攻坚和乡村振兴。坚持农业农村优先发展，加强脱贫攻坚与乡村振兴统筹衔接，确保如期实现脱贫攻坚目标、农民生活达到全面小康水平。
									</p>
								</div>
							</div>
						</div>
						
						
						
						
					</div>
				</div>
			</div>
		</main>

		<script type="text/javascript">
			document.querySelector('#sortable').sortablejs()
		</script>
		
		<div class="footer">
			<div class="location">
				<p><a href="{{ SITE_URL }}leap/">当前位置</a>&nbsp;&nbsp;&nbsp;>>&nbsp;&nbsp;&nbsp;
					<a href="{{ SITE_URL }}leap/">伟大的飞跃</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</p>
			</div>
			
				<div class="footer_nav">
					<span class="iconfont icon-huabian-15"></span><span class="iconfont icon-huabian-15"></span><span class="iconfont icon-huabian-15"></span>
				
				</div>
				<p><br></p>
				<ul>
					<li>
						<span class="iconfont icon-dangjian"></span>
						<a href="{{ SITE_URL }}">首页</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-fazhan1"></span>
						<a href="{{ SITE_URL }}marchOneHundred/">百年征程</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-dangyuan"></span>
						<a href="{{ SITE_URL }}founder/">党的创始人</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-huojianfeiyue"></span>
						<a href="{{ SITE_URL }}leap/">伟大的飞跃</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-dahuiricheng"></span>
						<a href="{{ SITE_URL }}congress/">党的全国代表大会</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-sixiangjianshe"></span>
						<a href="{{ SITE_URL }}ideology/">中国共产党指导思想</a>
					</li>
				</ul>
			</div>		


	</body>

<script>
	class CitiesSlider extends React.Component {
  constructor(props) {
    super(props);

    this.IMAGE_PARTS = 4;

    this.changeTO = null;
    this.AUTOCHANGE_TIME = 4000;

    this.state = { activeSlide: -1, prevSlide: -1, sliderReady: false };
  }

  componentWillUnmount() {
    window.clearTimeout(this.changeTO);
  }

  componentDidMount() {
    this.runAutochangeTO();
    setTimeout(() => {
      this.setState({ activeSlide: 0, sliderReady: true });
    }, 0);
  }

  runAutochangeTO() {
    this.changeTO = setTimeout(() => {
      this.changeSlides(1);
      this.runAutochangeTO();
    }, this.AUTOCHANGE_TIME);
  }

  changeSlides(change) {
    window.clearTimeout(this.changeTO);
    const { length } = this.props.slides;
    const prevSlide = this.state.activeSlide;
    let activeSlide = prevSlide + change;
    if (activeSlide < 0) activeSlide = length - 1;
    if (activeSlide >= length) activeSlide = 0;
    this.setState({ activeSlide, prevSlide });
  }

  render() {
    const { activeSlide, prevSlide, sliderReady } = this.state;
    return /*#__PURE__*/(
      React.createElement("div", { className: classNames('slider', { 's--ready': sliderReady }) }, /*#__PURE__*/
      React.createElement("p", { className: "slider__top-heading" }, "HISTORICAL LEAP"), /*#__PURE__*/
      React.createElement("div", { className: "slider__slides" },
      this.props.slides.map((slide, index) => /*#__PURE__*/
      React.createElement("div", {
        className: classNames('slider__slide', { 's--active': activeSlide === index, 's--prev': prevSlide === index }),
        key: slide.city }, /*#__PURE__*/

      React.createElement("div", { className: "slider__slide-content" }, /*#__PURE__*/
      React.createElement("h3", { className: "slider__slide-subheading" }, slide.country || slide.city), /*#__PURE__*/
      React.createElement("h2", { className: "slider__slide-heading" },
      slide.city.split('').map(l => /*#__PURE__*/React.createElement("span", null, l))), /*#__PURE__*/

      React.createElement("p", { className: "slider__slide-readmore" }, "查看详情>>")), /*#__PURE__*/

      React.createElement("div", { className: "slider__slide-parts" },
      [...Array(this.IMAGE_PARTS).fill()].map((x, i) => /*#__PURE__*/
      React.createElement("div", { className: "slider__slide-part", key: i }, /*#__PURE__*/
      React.createElement("div", { className: "slider__slide-part-inner", style: { backgroundImage: `url(${slide.img})` } }))))))), /*#__PURE__*/






      React.createElement("div", { className: "slider__control", onClick: () => this.changeSlides(-1) }), /*#__PURE__*/
      React.createElement("div", { className: "slider__control slider__control--right", onClick: () => this.changeSlides(1) })));


  }}


const slides = [
{
  city: '站起来',
  country: '1949年10月1日',
  img: '{{ STATIC_URL }}open/images/fy_zql.jpg' },

{
  city: '富起来',
  country:'1978年十一届三中全会',
  img: '{{ STATIC_URL }}open/images/fy_fql.jpg' },

{
  city: '强起来',
  country: '1980年，建立多个经济特区',
  img: '{{ STATIC_URL }}open/images/fy_qql.jpg' },

];



ReactDOM.render( /*#__PURE__*/React.createElement(CitiesSlider, { slides: slides }), document.querySelector('#app'));
</script>
</html>
